<html>
<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap第5、6章</title>
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<style>
			body{
				padding-top: 50px;
				background-color: darkseagreen;
			}
			h1{
				color: white;
			}
			h2{
				color: brown;
			}
			h3{
				color: cornflowerblue;
			}
			pre{
				max-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1> 第5章 菜单、按钮及导航</h1>
			<h2>1.下拉菜单</h2>
			<h3>1.1基本用法</h3>
			<p class="lead text-danger">小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：</p>
			<li class="lead">☑  LESS版本：对应的源码文件为 dropdowns.less</li>
			<li class="lead">☑  Sass版本：对应的源码文件为 _dropdowns.scss</li>
			<li class="lead">☑  编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行</li>
			<p class="lead text-danger">在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件：</p>
			<p class="lead"><span class="text-danger">特别声明：</span>因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。</p>
			<p class="lead">在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。我们来简单的看看：</p>
			<dl>
				<dt class="lead text-danger">使用方法：</dt>
				<dd class="lead text-danger">1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:&lt;div class="dropdown"&gt;&lt;/div&gt;</dd>
				<dd class="lead text-danger">2、使用了一个&lt;button&gt;按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:data-toggle="dropdown"</dd>
				<dd class="lead text-danger">3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:&lt;ul class="dropdown-menu"&gt;</dd>
				<div class="dropdown">
					<button type="button" class="btn btn-inverse btn-lg dropdown-toggle btn-block" data-toggle="dropdown">下拉菜单</button>
					<ul class="list-unstyled dropdown-menu btn-block text-center">
						<li class="btn-lg bg-danger">1111</li>
						<li class="btn-lg bg-primary">2222</li>
						<li class="btn-lg bg-info">3333</li>
					</ul>
				</div>
			</dl>
			<br />
			<h3>1.2原理分析</h3>
			<p class="lead">Bootstrap框架中的下拉菜单组件，其下拉菜单项默认是<span class="text-danger">隐藏的</span>因为“dropdown-menu”默认样式设置了“display:none”</p>
			<pre>
				.dropdown-menu {
				  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
				  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
				  left: 0;
				  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
				  display: none;/*默认隐藏下拉菜单项*/
				  float: left;
				  min-width: 160px;
				  padding: 5px 0;
				  margin: 2px 0 0;
				  font-size: 14px;
				  list-style: none;
				  background-color: #fff;
				  background-clip: padding-box;
				  border: 1px solid #ccc;
				  border: 1px solid rgba(0, 0, 0, .15);
				  border-radius: 4px;
				  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
				  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
				}
			</pre>
			<p class="lead text-danger">原理分析：</p>
			<p class="lead">现在我们来分析一下实现原理，非常简单，通过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说，默认情况，“div.dropdown”没有类名“open”，当用户第一次点击时，“div.dropdown”会添加类名“open”；当用户再次点击时，“div.dropdown”容器中的类名“open”又会被移除。我们可以通过浏览器的firebug查看整个过程：</p>
			<pre>
				.open>.dropdown-menu {
				    display: block;
				}
			</pre>
			<br />
			<h3>1.3下拉分隔线</h3>
			<p class="lead text-danger">在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码：</p>
			<pre>
				.dropdown-menu .divider {
					height: 1px;
					margin: 9px 0;
					overflow: hidden;
					background-color: #e5e5e5;
				}
			</pre>
			<div class="dropdown">
				<button data-toggle="dropdown" class="btn btn-primary btn-block dropdown-toggle" type="button">
					下拉分割线的下拉菜单：3和4之间
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu btn-block">
					<li class="btn-lg bg-danger">1111</li>
					<li class="btn-lg bg-primary">2222</li>
					<li class="btn-lg bg-info">3333</li>
					<li class="divider"></li>
					<li class="btn-lg bg-warning">4444</li>
				</ul>
			</div>
			<p class="lead text-danger">注意：也个页面可以用多个dropdown，我猜btn的data-toggle是js通过this的父元素是data-toggle的值的类名的方式来找的</p>
			<br />
			<h3>1.4菜单标题</h3>
			<p class="lead text-danger">上一小节讲解通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。如下：<span class="text-primary">class="dropdown-header"</span></p>
			<div class="dropdown">
				<button data-toggle="dropdown" class="btn btn-primary btn-block dropdown-toggle" type="button">
					菜单标题的下拉菜单
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu btn-block">
					<li class="dropdown-header btn-block">第1部分的头部</li>
					<li class="btn-lg bg-danger">1111</li>
					<li class="btn-lg bg-primary">2222</li>
					<li class="btn-lg bg-info">3333</li>
					<li class="divider"></li>
					<li class="dropdown-header btn-block">第2部分的头部</li>
					<li class="btn-lg bg-warning">4444</li>
				</ul>
			</div>
			<pre>
				.dropdown-header {
				  display: block;
				  padding: 3px 20px;
				  font-size: 12px;
				  line-height: 1.42857143;
				  color: #999;
				}
			</pre>
			<br />
			<h3>1.5对齐方式</h3>
			<dl>
				<dt class="lead">实现右对齐方法：</dt>
				<dd class="lead">Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名</dd>
			</dl>
			<div class="dropdown">
				<button data-toggle="dropdown" class="btn btn-primary btn-block dropdown-toggle" type="button">
					右对齐下拉菜单
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu pull-right">
					<li class="btn-lg bg-danger">1111</li>
					<li class="btn-lg bg-primary">2222</li>
					<li class="btn-lg bg-info">3333</li>
					<li class="divider"></li>
					<li class="btn-lg bg-warning">4444</li>
				</ul>
			</div>
			<p class="bg-warning lead"><span class="text-danger">这里我没懂：</span>同时一定要为.dropdown添加float:leftcss样式。</p>
			<p class="lead text-danger">与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。</p>
			<pre>
				.dropdown-menu.pull-right {
				  right: 0;
				  left: auto;
				}
				.dropdown-menu-right {
				  right: 0;
				  left: auto;
				}
			</pre>
			<br />
			<h3>1.6菜单项状态</h3>
			<p class="lead text-danger">下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）</p>
			<pre>
				.dropdown-menu > li > a:hover,
				.dropdown-menu > li > a:focus {
					color: #262626;
					text-decoration: none;
					background-color: #f5f5f5;					
				}
			</pre>
			<p class="lead text-danger">下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：</p>
			<div class="dropdown">
				<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
					按钮
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li class="active"><a href="#">下拉菜单项</a></li>
					<li><a href="#">下拉菜单项</a></li>
					<li><a href="#">下拉菜单项</a></li>
					<li class="disabled"><a href="#">下拉菜单项</a></li>
				</ul>
			</div>
			<p class="lead bg-primary">看见没下拉菜单内必需要有a标签</p>
			<pre>
				.dropdown-menu > .active > a,
				.dropdown-menu > .active > a:hover,
				.dropdown-menu > .active > a:focus {
				  color: #fff;
				  text-decoration: none;
				  background-color: #428bca;
				  outline: 0;
				}
				.dropdown-menu > .disabled > a,
				.dropdown-menu > .disabled > a:hover,
				.dropdown-menu > .disabled > a:focus {
				  color: #999;
				}
				.dropdown-menu > .disabled > a:hover,
				.dropdown-menu > .disabled > a:focus {
				  text-decoration: none;
				  cursor: not-allowed;
				  background-color: transparent;
				  background-image: none;
				  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
				}
			</pre>
			<br />
			<h2>2.按钮</h2>
			<h3>2.1按钮组</h3>
			<p class="lead text-primary">单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件</p>
			<dl>
				<dt>按钮组也是一个独立的组件，所以可以找到对应的源码文件：</dt>
				<dd>☑  LESS版本：对应的源文件为buttons.less</dd>
				<dd>☑  Sass版本：对应的源文件为_buttons.scss</dd>
				<dd>☑  CSS版本：对应bootstrap.css文件第3131行～第3291行</dd>
			</dl>
			<dl>
				<dt>使用方法：</dt>
				<dd>按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。</dd>
				<dd>对于结构方面，非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。</dd>	
			</dl>
			<div class="btn-group">
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-step-backward"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-fast-backward"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-backward"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-play"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-pause"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-stop"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-forward"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-fast-forward"></span>
				</button>
				<button type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-step-forward"></span>
				</button>
			</div>
			<p class="lead text-danger">除了可以使用&lt;button&gt;元素之外，还可以使用其他标签元素，比如&lt;a&gt;标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。</p>
			<dl>
				<dt>从效果图上我们可以看出，按钮组四个角都是圆角（支持CSS3的浏览器），但有的小伙伴会问，我们平常制作网页时每个按钮都是带有圆角，而在按钮组中的按钮，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角，它是怎么实现的呢？其实实现方法非常简单：</dt>
				<dd>1、默认所有按钮都有圆角</dd>
				<dd>2、除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果</dd>
				<dd>3、第一个按钮只留左上角和左下角是圆角</dd>
				<dd>4、最后一个按钮只留右上角和右下角是圆角</dd>
			</dl>
			<pre>
				.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
				  border-radius: 0;
				}
				.btn-group > .btn:first-child {
				  margin-left: 0;
				}
				.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
				  border-top-right-radius: 0;
				  border-bottom-right-radius: 0;
				}
				.btn-group > .btn:last-child:not(:first-child),
				.btn-group > .dropdown-toggle:not(:first-child) {
				  border-top-left-radius: 0;
				  border-bottom-left-radius: 0;
				}
				.btn-group > .btn-group {
				  float: left;
				}
				.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
				  border-radius: 0;
				}
				.btn-group > .btn-group:first-child> .btn:last-child,
				.btn-group > .btn-group:first-child> .dropdown-toggle {
				  border-top-right-radius: 0;
				  border-bottom-right-radius: 0;
				}
				.btn-group > .btn-group:last-child> .btn:first-child {
				  border-top-left-radius: 0;
				  border-bottom-left-radius: 0;
				}
			</pre>
			<h3>2.2按钮工具栏</h3>
			<p class="lead text-danger">你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中</p>
			<div class="btn-toolbar">
				<div class="btn-group">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
				</div>
				<div class="btn-group">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
				</div>
			</div>
			<p class="lead text-danger">实现原理主要是让容器的多个分组“btn-group”元素进行浮动，并且组与组之前保持5px的左外距</p>
			<pre>
				.btn-toolbar {
				 	margin-left: -5px;
				}
				.btn-toolbar .btn-group,
				.btn-toolbar .input-group {
				 	float: left;
				}
				.btn-toolbar > .btn,
				.btn-toolbar > .btn-group,
				.btn-toolbar > .input-group {
				 	margin-left: 5px;
				}
			</pre>
			<p class="lead text-danger">注意:在”btn-toolbar”上清除浮动。</p>
			<pre>
				.btn-toolbar:before,
				.btn-toolbar:after｛
					display: table;
				content: " ";
				｝
				.btn-toolbar:after{
					clear: both;
				}
			</pre>
			<p class="lead text-danger">按钮组大小设置</p>
			<p class="lead text-danger">只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组</p>
			<dl>
				<dt>在介绍按钮一节中，我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法：</dt>
				<dd>☑  .btn-group-lg: <span class="text-danger">大按钮组</span></dd>
				<dd>☑  .btn-group-sm: <span class="text-danger">小按钮组</span></dd>
				<dd>☑  .btn-group-xs: <span class="text-danger">超小按钮组</span></dd>
			</dl>
			<pre>
				.btn-lg,
				.btn-group-lg> .btn{
				  padding: 10px 16px;
				  font-size: 18px;
				  line-height: 1.33;
				  border-radius: 6px;
				}
				.btn-sm,
				.btn-group-sm> .btn {
				  padding: 5px 10px;
				  font-size: 12px;
				  line-height: 1.5;
				  border-radius: 3px;
				}
				.btn-xs,
				.btn-group-xs> .btn{
				  padding: 1px 5px;
				  font-size: 12px;
				  line-height: 1.5;
				  border-radius: 3px;
				}
			</pre>		
			<div class="btn-toolbar">
				<div class="btn-group btn-group-lg">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
				</div>
				<div class="btn-group">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
				</div>
				<div class="btn-group btn-group-sm">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
				</div>
				<div class="btn-group btn-group-xs">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
				    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
				</div>
			</div>
			<br />
			<h3>2.3嵌套分组</h3>
			<p class="lead">很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于<span class="text-danger">导航菜单</span>的效果</p>
			<p class="lead">使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成<span class="text-danger">“btn-group”，并且和普通的按钮放在同一级</span></p>
			<pre>
				.btn-group > .btn-group {
				  float: left;
				}
				.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
				  border-radius: 0;
				}
				.btn-group > .btn-group:first-child> .btn:last-child,
				.btn-group > .btn-group:first-child> .dropdown-toggle {
				  border-top-right-radius: 0;
				  border-bottom-right-radius: 0;
				}
				.btn-group > .btn-group:last-child> .btn:first-child {
				  border-top-left-radius: 0;
				  border-bottom-left-radius: 0;
				}
				.btn-group .dropdown-toggle:active,
				.btn-group.open .dropdown-toggle {
				  outline: 0;
				}
				.btn-group > .btn + .dropdown-toggle {
				  padding-right: 8px;
				  padding-left: 8px;
				}
				.btn-group > .btn-lg + .dropdown-toggle {
				  padding-right: 12px;
				  padding-left: 12px;
				}
				.btn-group.open .dropdown-toggle {
				  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
				  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
				}
				.btn-group.open .dropdown-toggle.btn-link {
				  -webkit-box-shadow: none;
				  box-shadow: none;
				}
			</pre>
			<h4 class="text-danger">注意：这里的data-toggle到底干嘛的啊</h4>
			<div class="btn-group">
				<button class="btn btn-primary">首页</button>
				<button class="btn btn-primary">产品</button>
				<button class="btn btn-primary">案例</button>
				<button class="btn btn-primary">联系</button>
				<div class="btn-group">
					<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
						关于我们
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li><a href="##">公司简介</a></li>
						<li><a href="##">企业文化</a></li>
						<li><a href="##">组织结构</a></li>
						<li><a href="##">客服服务</a></li>
					</ul>
				</div>
			</div>
			<h3>2.4垂直分组</h3>
			<p class="lead">前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成<span class="text-danger">“btn-group-vertical”</span>即可。如下所示：</p>
			<pre>
				.btn-group-vertical > .btn,
				.btn-group-vertical > .btn-group,
				.btn-group-vertical > .btn-group > .btn {
				  display: block;
				  float: none;
				  width: 100%;
				  max-width: 100%;
				}
				.btn-group-vertical > .btn-group > .btn {
				  float: none;
				}
				.btn-group-vertical > .btn + .btn,
				.btn-group-vertical > .btn + .btn-group,
				.btn-group-vertical > .btn-group + .btn,
				.btn-group-vertical > .btn-group + .btn-group {
				  margin-top: -1px;
				  margin-left: 0;
				}
				.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
				  border-radius: 0;
				}
				.btn-group-vertical > .btn:first-child:not(:last-child) {
				  border-top-right-radius: 4px;
				  border-bottom-right-radius: 0;
				  border-bottom-left-radius: 0;
				}
				.btn-group-vertical > .btn:last-child:not(:first-child) {
				  border-top-left-radius: 0;
				  border-top-right-radius: 0;
				  border-bottom-left-radius: 4px;
				}
				.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
				  border-radius: 0;
				}
				.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
				.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
				  border-bottom-right-radius: 0;
				  border-bottom-left-radius: 0;
				}
				.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
				  border-top-left-radius: 0;
				  border-top-right-radius: 0;
				}
			</pre>
			<dl>
				<dt>和水平分组按钮不一样的是：</dt>
				<dd>☑  水平分组按钮第一个按钮左上角和左下角具有圆角以及最后一个按钮右上角和右下角具有圆角</dd>
				<dd>☑  垂直分组按钮第一个按钮左上角和右上角具有圆角以及最后一个按钮左下角和右下角具有圆角</dd>
			</dl>
			<div class="btn-group-vertical">
				<button class="btn btn-primary">首页</button>
				<button class="btn btn-primary">产品</button>
				<button class="btn btn-primary">案例</button>
				<button class="btn btn-primary">联系</button>
				<div class="btn-group">
					<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
						关于我们
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li><a href="##">公司简介</a></li>
						<li><a href="##">企业文化</a></li>
						<li><a href="##">组织结构</a></li>
						<li><a href="##">客服服务</a></li>
					</ul>
				</div>
			</div>
			<br />
			<h3>2.5等分分组</h3>
			<p class="lead">等分按钮也常被称为是<span class="text-danger">自适应分组</span>按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个<span class="text-danger">“btn-group-justified”</span>类名</p>
			<p class="lead">实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）</p>
			<pre>
				.btn-group-justified {
				  display: table;
				  width: 100%;
				  table-layout: fixed;
				  border-collapse: separate;
				}
				.btn-group-justified > .btn,
				.btn-group-justified > .btn-group {
				  display: table-cell;
				  float: none;
				  width: 1%;
				}
				.btn-group-justified > .btn-group .btn {
				  width: 100%;
				}
			</pre>	
			<p class="lead"><span class="text-danger">特别声明：</span>在制作等分按钮组时，请尽量使用&lt;a&gt;标签元素来制作按钮，因为使用&lt;button&gt;标签元素时，使用display:table在部分浏览器下支持并不友好。</p>
			<div>
				<div class="btn-group btn-group-justified">
					 <a class="btn btn-primary" href="#">首页</a>
					 <a class="btn btn-primary" href="#">产品</a>
					 <a class="btn btn-primary" href="#">案例</a>
					 <a class="btn btn-primary" href="#">我们</a>
				</div>
			</div>	
			<br />
			<h3>2.6按钮下拉菜单</h3>
			<p class="lead"><span class="text-danger">按钮下拉菜单</span>仅从外观上看和上一节介绍的<span>下拉菜单效果</span>基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。</p>
			<pre>
				.btn-group .dropdown-toggle:active,
				.btn-group.open .dropdown-toggle {
				  outline: 0;
				}
				.btn-group > .btn + .dropdown-toggle {
				  padding-right: 8px;
				  padding-left: 8px;
				}
				.btn-group > .btn-lg + .dropdown-toggle {
				  padding-right: 12px;
				  padding-left: 12px;
				}
				.btn-group.open .dropdown-toggle {
				  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
				          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
				}
				.btn-group.open .dropdown-toggle.btn-link {
				  -webkit-box-shadow: none;
				          box-shadow: none;
				}
			</pre>
			<div class="btn-group">
	    			<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
			    <ul class="dropdown-menu">
				    	<li class="active"><a href="##">按钮下拉菜单项</a></li>
				    	<li><a href="##">按钮下拉菜单项</a></li>
				    	<li><a href="##">按钮下拉菜单项</a></li>
				    	<li class="disabled"><a href="##">按钮下拉菜单项</a></li>
			    </ul>
			</div>
			<br />
			<h3>2.7按钮的向下向上三角形</h3>
			<p class="lead">按钮的<span class="text-danger">向下三角形</span>，我们是通过在&lt;button&gt;标签中添加一个“&lt;span&gt;”标签元素，并且命名为“caret”:</p>
			<pre>
				.caret {
				  display: inline-block;
				  width: 0;
				  height: 0;
				  margin-left: 2px;
				  vertical-align: middle;
				  border-top: 4px solid;
				  border-right: 4px solid transparent;
				  border-left: 4px solid transparent;
				}
			</pre>
			<p class="lead">另外在按钮中的三角形“caret”做了一定的样式处理：</p>
			<pre>
				.btn .caret {
				  margin-left: 0;
				}
				.btn-lg .caret {
				  border-width: 5px 5px 0;
				  border-bottom-width: 0;
				}
				.dropup .btn-lg .caret {
				  border-width: 0 5px 5px;
				}
			</pre>
			<p class="lead">有的时候我们的下拉菜单会<span class="text-danger">向上弹起</span>（接下来一个小节会介绍），这个时候我们的<span class="text-danger">三角方向需要朝上</span>显示，实现方法：需要在“.btn-group”类上追加<span class="text-danger">“dropup”</span>类名（这也是做向上弹起下拉菜单要用的类名）。</p>		
			<pre>
				.dropup .caret,
				.navbar-fixed-bottom .dropdown .caret {
				  content: "";
				  border-top: 0;
				  border-bottom: 4px solid;
				}
			</pre>	
			<div class="btn-group">
				<button class="dropup btn btn-primary btn-lg">按钮<span class="caret"></span></button>
				<span class="text-danger lead">第一个按钮没显示因为btn-lg与dropup冲突</span>
				<button class="btn btn-primary btn-lg">按钮<span class="caret"></span></button>
			</div>	
			<div class="btn-group dropup">
				<button class="btn btn-primary btn-lg">按钮<span class="caret"></span></button>
			</div>
			<hr />
			<h3>2.8向上弹起的下拉菜单</h3>
			<p class="lead">有些菜单是需要向上弹出的，比如说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了<span class="text-danger">让用户有更好的体验</span>，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名<span class="text-danger">“dropup”</span>。使用方法正如前面所示，只需要在<span class="text-danger">“btn-group”</span>上添加这个类名（当然，如果是普通向上弹出下拉菜单，你只需要在<span class="text-danger">“dropdown”</span>类名基础上追加<span class="text-danger">“dropup”</span>类名即可）。</p>
			<pre>
				.dropup .dropdown-menu,
				.navbar-fixed-bottom .dropdown .dropdown-menu {
				  top: auto;
				  bottom: 100%;
				  margin-bottom: 1px;
				}
			</pre>	
			<p class="lead">从上面的例子中可以看出，实现方法为：主要将“dropdown-menu”的top值变成了auto，而把bottom值换成了100%</p>			
			<div class="btn-group dropup">
				<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
					按钮下拉菜单
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li class="active"><a href="#">按钮下拉菜单项</a></li>
					<li><a href="#">按钮下拉菜单项</a></li>
					<li><a href="#">按钮下拉菜单项</a></li>
					<li><a href="#">按钮下拉菜单项</a></li>
				</ul>		
			</div>
			<br /><br />
			<h2>3.导航</h2>
			<h3>3.1基础样式</h3>
			<dl>
				<dt>在Bootstrap框架将导航独立出来成为一个导航组件，根据不同的版本，可以找到对应的源码：</dt>
				<dd>☑ LESS版本：对应的源文件是navs.less</dd>
				<dd>☑ Sass版本：对应的源文件是_navs.scss</dd>
				<dd>☑ 编译后版本：对应源码是bootstrap.css文件第3450行～第3641行</dd>
			</dl>
			<dl>
				<dt class="lead text-danger">导航基础样式</dt>
				<dd class="lead">Bootstrap框架中制作导航条主要通过<span class="text-danger">“.nav”</span>样式。<span class="text-danger">默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类</span>。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式。</dd>
			</dl>
			<pre>
				.nav {
				  padding-left: 0;
				  margin-bottom: 0;
				  list-style: none;
				}
				.nav> li {
				  position: relative;
				  display: block;
				}
				.nav> li > a {
				  position: relative;
				  display: block;
				  padding: 10px 15px;
				}
				.nav> li >a:hover,
				.nav> li >a:focus {
				  text-decoration: none;
				  background-color: #eee;
				}
				.nav>li.disabled> a {
				  color: #999;
				}
				.nav>li.disabled>a:hover,
				.nav>li.disabled>a:focus {
				  color: #999;
				  text-decoration: none;
				  cursor: not-allowed;
				  background-color: transparent;
				}
				.nav .open > a,
				.nav .open >a:hover,
				.nav .open >a:focus {
				  background-color: #eee;
				  border-color: #428bca;
				}
				.nav .nav-divider {
				  height: 1px;
				  margin: 9px 0;
				  overflow: hidden;
				  background-color: #e5e5e5;
				}
				.nav> li > a >img {
				  max-width: none;
				}
			</pre>
			<ul class="nav nav-tabs">
				<li><a href="##">Home</a></li>
			    <li><a href="##">CSS3</a></li>
			 	<li><a href="##">Sass</a></li>
			 	<li><a href="##">jQuery</a></li>
			 	<li><a href="##">Responsive</a></li>
			</ul>	
			<br />
			<h3>3.2标签形tab导航</h3>
			<p class="lead">标签形导航，也称为<span class="text-danger">选项卡导航</span>。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。</p>
			<p class="lead">标签形导航是通过<span class="text-danger">“nav-tabs”</span>样式来实现。在制作标签形导航时需要在原导航<span class="text-danger">“nav”</span>上追加此类名</p>
			<ul class="nav nav-tabs">
				<li><a href="##">Home</a></li>
			    <li><a href="##">CSS3</a></li>
			 	<li><a href="##">Sass</a></li>
			 	<li><a href="##">jQuery</a></li>
			 	<li><a href="##">Responsive</a></li>
			</ul>
			<p class="lead">实现原理非常的简单，将菜单项（li）按块显示，并且让他们在同一水平上排列，然后定义非高亮菜单的样式和鼠标悬浮效果。</p>
			<pre>
				.nav-tabs {
				border-bottom: 1px solid #ddd;
				}
				.nav-tabs > li {
				float: left;
				margin-bottom: -1px;
				}
				.nav-tabs > li > a {
				margin-right: 2px;
				line-height: 1.42857143;
				border: 1px solid transparent;
				border-radius: 4px 4px 0 0;
				}
				.nav-tabs > li >a:hover {
				border-color: #eee #eee #ddd;
				}
			</pre>
			<p class="lead">其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名<span class="text-danger">“class="active"”</span>即可</p>			
			<p class="lead">除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加<span class="text-danger">“class="disabled"”</span>即可</p>
			<p class="lead">实现这个效果的样式，在默认样式“.nav”中就带有：</p>
			<pre>
				.nav>li.disabled> a {
				  color: #999;
				}
				.nav>li.disabled>a:hover,
				.nav>li.disabled>a:focus {
				  color: #999;
				  text-decoration: none;
				  cursor: not-allowed;
				  background-color: transparent;
				}
			</pre>
			<ul class="nav nav-tabs">
				<li><a href="##">Home</a></li>
			    <li class="active"><a href="##">CSS3</a></li>
			 	<li><a href="##">Sass</a></li>
			 	<li class="disabled"><a href="##">jQuery</a></li>
			 	<li><a href="##">Responsive</a></li>
			</ul>
			<pre>
				.nav-tabs >li.active> a,
				.nav-tabs >li.active>a:hover,
				.nav-tabs >li.active>a:focus {
				  color: #555;
				  cursor: default;
				  background-color: #fff;
				  border: 1px solid #ddd;
				  border-bottom-color: transparent;
				}
			</pre>
			<p class="lead"><span class="text-danger">注意：</span>我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配合js插件，这部分将在后面的教程中会介绍。</p>
			<br />
			<h3>3.3胶囊形(pills)导航</h3>
			<p class="lead">胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名<span class="text-danger">“nav-tabs”</span>换成<span class="text-danger">“nav-pills”</span>即可：</p>
			<ul class="nav nav-pills">
				<li class="active"><a href="##">Home</a></li>
				<li><a href="##">CSS3</a></li>
				<li><a href="##">Sass</a></li>
				<li><a href="##">jQuery</a></li>
				<li class="disabled"><a href="##">Responsive</a></li>
			</ul>
			<pre>
				.nav-pills > li {
				  float: left;
				}
				.nav-pills > li > a {
				  border-radius: 4px;
				}
				.nav-pills > li + li {
				  margin-left: 2px;
				}
				.nav-pills >li.active> a,
				.nav-pills >li.active>a:hover,
				.nav-pills >li.active>a:focus {
				color: #fff;
				  background-color: #428bca;
				}
			</pre>
			<hr />
			<h3>3.4垂直堆叠的导航</h3>
			<p class="lead">在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在<span class="text-danger">“nav-pills”</span>的基础上添加一个<span class="text-danger">“nav-stacked”</span>类名即可</p>
			<p class="lead">垂直堆叠导航与胶囊形导航相比，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距</p>
			<pre>
				.nav-stacked > li {
				  float: none;
				}
				.nav-stacked > li + li {
				  margin-top: 2px;
				  margin-left: 0;
				}
			</pre>
			<p class="lead">大家是否还记得，在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“&lt;li class=”<span class="text-danger">nav-divider</span>”&gt;&lt;/li&gt;”即可</p>
			<pre>
				.nav .nav-divider {
				height: 1px;
				margin: 9px 0;
				overflow: hidden;
				background-color: #e5e5e5;
				}
			</pre>
			<ul class="nav nav-pills nav-stacked">
				<li class="active"><a href="##">Home</a></li>
				<li><a href="##">CSS3</a></li>
				<li><a href="##">Sass</a></li>
				<li><a href="##">jQuery</a></li>
				<li class="nav-divider"></li>
				<li class="disabled"><a href="##">Responsive</a></li>
			</ul>
			<p class="lead">或许你会问，如果我在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本将这个效果取消了，可能作者觉得垂直选择项并不太常见，也不美观吧。</p>
			<hr />
			<h3>3.5自适应导航（使用）</h3>	
			<p class="lead">自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名<span class="text-danger">“nav-justified”</span>。当然他需要和<span class="text-danger">“nav-tabs”</span>或者<span class="text-danger">“nav-pills”</span>配合在一起使用。</p>
			<ul class="nav nav-pills nav-justified">
				<li class="active"><a href="##">Home</a></li>
				<li><a href="##">CSS3</a></li>
				<li><a href="##">Sass</a></li>
				<li><a href="##">jQuery</a></li>
				<li class="disabled"><a href="##">Responsive</a></li>
			</ul>
			<dl>
				<dt>实现原理</dt>
				<dd>实现原理并不难，列表（&lt;ul&gt;）上设置宽度为<span class="text-danger">“100%”</span>，然后每个菜单项(&lt;li&gt;)设置了<span class="text-danger">“display:table-cell”</span>，让列表项以模拟表格单元格的形式显示</dd>
			</dl>
			<pre>
				.nav-justified {
				  width: 100%;
				}
				.nav-justified > li {
				  float: none;
				}
				.nav-justified > li > a {
				  margin-bottom: 5px;
				  text-align: center;
				}
				.nav-justified > .dropdown .dropdown-menu {
				  top: auto;
				  left: auto;
				}
				@media (min-width: 768px) {
				  .nav-justified > li {
				  display: table-cell;
				  width: 1%;
				  }
				  .nav-justified > li > a {
				  margin-bottom: 0;
				  }
				}
			</pre>
			<p class="lead">这里有一个媒体查询条件：<span class="text-danger">“@media (min-width:768px){…}”</span>表示自适应导航仅在浏览器视窗宽度大于<span class="text-danger">768px</span>才能按上图风格显示。浏览器视窗宽度小于768px时，在样式上做了另外的处理。</p>
			<pre>
				.nav-tabs.nav-justified {
				 width: 100%;
				 border-bottom: 0;
				}
				.nav-tabs.nav-justified > li {
				 float: none;
				}
				.nav-tabs.nav-justified > li > a {
				 margin-bottom: 5px;
				 text-align: center;
				}
				.nav-tabs.nav-justified > .dropdown .dropdown-menu {
				 top: auto;
				 left: auto;
				}
				@media (min-width: 768px) {
				 .nav-tabs.nav-justified > li {
				 display: table-cell;
				 width: 1%;
				  }
				.nav-tabs.nav-justified > li > a {
				 margin-bottom: 0;
				  }
				}
				.nav-tabs.nav-justified > li > a {
				 margin-right: 0;
				 border-radius: 4px;
				}
				.nav-tabs.nav-justified > .active > a,
				.nav-tabs.nav-justified > .active >a:hover,
				.nav-tabs.nav-justified > .active >a:focus {
				 border: 1px solid #ddd;
				}
				@media (min-width: 768px) {
				 .nav-tabs.nav-justified > li > a {
				 border-bottom: 1px solid #ddd;
				 border-radius: 4px 4px 0 0;
				  }
				.nav-tabs.nav-justified > .active > a,
				.nav-tabs.nav-justified > .active >a:hover,
				.nav-tabs.nav-justified > .active >a:focus {
				 border-bottom-color: #fff;
				  }
				}
			</pre>
			<hr />
			<h3>3.6导航加下拉菜单（二级导航）</h3>	
			<p class="lead">前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将<span class="text-danger">li</span>当作父容器，使用类名<span class="text-danger">“dropdown”，同时在li中嵌套另一个列表ul</span></p>
			<ul class="nav nav-pills nav-justified">
				<li class="active dropdown">
					<a href="##" class="dropdown-toggle" data-toggle="dropdown">
						Home
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="##">CSS3</a></li>
						<li><a href="##">Sass</a></li>
						<li class="nav-divider"></li>
						<li><a href="##">jQuery</a></li>
					</ul>
				</li>
				<li><a href="##">CSS3</a></li>
				<li><a href="##">Sass</a></li>
				<li><a href="##">jQuery</a></li>
			</ul>
			<p class="lead">通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名。简单点来说，就是依靠这个类名来控制二级导航显示与否，并且设置了背景色和边框</p>
			<pre>
				.nav .open > a,
				.nav .open >a:hover,
				.nav .open >a:focus {
				background-color: #eee;
				border-color: #428bca;
				}
			</pre>
			<p class="lead">添加分割线：添加<span class="text-danger">“&lt;li class=”nav-divider”&gt;&lt;"/li&gt;”</span>这样的一个空标签就可以</p>
			<pre>
				.nav .nav-divider {
				  height: 1px;
				  margin: 9px 0;
				  overflow: hidden;
				  background-color: #e5e5e5;
				}
			</pre>
			<hr />
			<h3>3.7面包屑式导航</h3>	
			<ul>
				<dt class="lead">面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件</dt>
				<li>LESS版本：对应源文件breadcrumbs.less</li>
				<li>Sass版本：对应源文件_breadcrumbs.scss</li>
				<li>编译出来的版本：源码对应bootstrap.css文件第4112行～第4129行</li>
			</ul>
			<dl class="lead">
				<dt>使用方法</dt>
				<dd>使用方式就很简单，为ol加入<span class="text-danger">breadcrumb类</span></dd>
			</dl>
			<ol class="breadcrumb">
				<li><a href="#">首页</a></li>
				<li><a href="#">我的书</a></li>
				<li class="active">《图解CSS3》</li>
			</ol>
			<dl class="lead">
				<dt>实现原理</dt>
				<dd>看来不错吧！作者是使用li+li:before实现li与li之间的分隔符，所以这种方案在IE低版本就惨了（不支持）。</dd>
			</dl>
			<pre>
				.breadcrumb {
				padding: 8px 15px;
				margin-bottom: 20px;
				list-style: none;
				background-color: #f5f5f5;
				border-radius: 4px;
				}
				
				.breadcrumb> li {
				display: inline-block;
				}
				
				.breadcrumb> li + li:before {
				padding: 0 5px;
				color: #ccc;
				content: "/\00a0";
				}
				
				.breadcrumb> .active {
				color: #999;
				}
			</pre>
			<div>"/\00a0"这是啥</div>
		</div>
		<div class="container">
			<h1>第6章 导航条、分页导航</h1>
			<h2>1.导航条</h2>
			<h3>1.1基础导航条</h3>
			<p class="lead">导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。</p>
			<ul class="lead">
				<dt>导航条和导航一样，在Bootstrap框架中是一个独立组件，所以你也可以根据自己的需求使用不同的版本：</dt>
				<li>LESS版本：对应的源文件navbar.less</li>
				<li>Sass版本：对应的源文件_navbar.scss</li>
				<li>编译后的版本：查看bootstrap.css文件第3642行～第4111行（注意这个所说的Bootstrap版本是3.1.1，其它版本位置是不一致的），这五百多行代码已从原文中节取出来，放在右侧代码顶部“bootstrap.css”文件中，小伙伴们可以查看。</li>
			</ul>
			<br />
			<p class="lead">在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——<span class="text-danger">基础导航条</span>。</p>
			<dl class="lead">
				<dt>使用方法</dt>
				<dd>第一步：首先在制作导航的列表(&lt;ul class=”nav”&gt;)基础上添加类名<span class="text-danger">“navbar-nav”</span></dd>
				<dd>第二步：在列表外部添加一个容器（div），并且使用类名<span class="text-danger">“navbar”</span>和<span class="text-danger">“navbar-default”</span></dd>
			</dl>
			<p class="lead">“.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置。其主要源码如下：</p>
			<pre>
				.navbar {
				  position: relative;
				  min-height: 50px;
				  margin-bottom: 20px;
				  border: 1px solid transparent;
				}
			</pre>
			<p class="lead">而导航条的颜色都是通过<span class="text-danger">“.navbar-default”</span>来进行控制：</p>
			<pre>
				.navbar-default {
				  background-color: #f8f8f8;
				  border-color: #e7e7e7;
				}
			</pre>
			<p class="lead">navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距。同时也不包括颜色等样式设置，源码请查看bootstrap.css文件第3785行～第3830行，我们把代码节选出来放入右侧bootstrap.css中。</p>			
			<pre>
				.navbar-default .navbar-nav> li > a {
				  color: #777;
				}
				.navbar-default .navbar-nav> li >a:hover,
				.navbar-default .navbar-nav> li >a:focus {
				  color: #333;
				  background-color: transparent;
				}
				.navbar-default .navbar-nav> .active > a,
				.navbar-default .navbar-nav> .active >a:hover,
				.navbar-default .navbar-nav> .active >a:focus {
				  color: #555;
				  background-color: #e7e7e7;
				}
				.navbar-default .navbar-nav> .disabled > a,
				.navbar-default .navbar-nav> .disabled >a:hover,
				.navbar-default .navbar-nav> .disabled >a:focus {
				  color: #ccc;
				  background-color: transparent;
				}
			</pre>
			<div class="navbar navbar-default">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">111</a></li>
					<li><a href="#">222</a></li>
					<li><a href="#">333</a></li>
					<li><a href="#">444</a></li>
				</ul>
			</div>
			<br />
			<h3>1.2为导航条添加标题、二级菜单及状态</h3>
			<dl>
				<dt>加入导航条标题</dt>
				<dd>在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过<span class="text-danger">“navbar-header”</span>和<span class="text-danger">“navbar-brand”</span>来实现，示例查看代码编辑器（11-22）。</dd>
				<dt>原理分析：</dt>
				<dd>此功能主要起一个提醒功能，当然改良一下可以当作是logo(此处不做过多阐述)。其样式主要是加大了字体设置，并且设置了最大宽度</dd>
			</dl>
			<pre>
				.navbar-brand {
					float: left;
					height: 50px;
					padding: 15px 15px;
					font-size: 18px;
					line-height: 20px;
				}
				.navbar-brand:hover,
				.navbar-brand:focus {
					text-decoration: none;
				}
				@media (min-width: 768px) {
					.navbar> .container .navbar-brand,
					.navbar> .container-fluid .navbar-brand {
						margin-left: -15px;
					}
				}
			</pre>
			<p class="lead">同样在默认导航条（navbar-default）下，对navbar-brand也做了颜色处理</p>
			<pre>
				.navbar-default .navbar-brand {
					color: #777;
				}
				.navbar-default .navbar-brand:hover,
				.navbar-default .navbar-brand:focus {
					color: #5e5e5e;
					background-color: transparent;
				}
			</pre>
			<dl>
				<dt>导航条状态、二级菜单</dt>
				<dd>同样的，在基础导航条中对菜单提供了<span class="text-danger">当前状态，禁用状态，悬浮状态等效果</span>，而且<span class="text-danger">也可以带有二级菜单</span>的导航条</dd>
			</dl>
			<div class="navbar navbar-default">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">慕课网</a>
				</div>
				<ul class="nav navbar-nav">
				    <li class="active"><a href="##">网站首页</a></li>
			        <li class="disabled"><a href="##">系列教程</a></li>
			        <li><a href="##">名师介绍</a></li>
			        <li><a href="##">成功案例</a></li>
			        <li class="dropdown">
			            <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
			            <ul class="dropdown-menu">
				        	<li><a href="##">CSS3</a></li>
				        	<li><a href="##">JavaScript</a></li>
				        	<li class="disabled"><a href="##">PHP</a></li>
				        </ul>
			        </li>
			        <li><a href="##">关于我们</a></li>
				</ul>
			</div>
			<p class="lead text-danger">这部分有个bug，就是设置container容器之后active会显示超出部分的底色，bt没做处理，可以自己调控overflow hidden或者取消navbar-nav的margin：-15px</p>
			<br />
			<h3>1.3带表单的导航条</h3>
			<p class="lead">在Bootstrap框架中提供了一个<span class="text-danger">“navbar-form”</span>，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单</p>
			<p class="lead"><span class="text-danger">“navbar-left”</span>让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了<span class="text-danger">“navbar-right”</span>样式，让元素在导航条靠右对齐。</p>
			<pre>
				@media (min-width: 768px) {
				 .navbar-left {
				 float: left !important;
				}
				.navbar-right {
				 float: right !important;
				 }
				}
			</pre>
			<p class="lead"><span class="text-danger">注意：</span>这里有一个条件，只有当浏览器视窗宽度大于768px生效。</p>
			<div class="navbar navbar-inverse">
				<div class="navbar-header">
					<a href="javascript:;" class="navbar-brand">header</a>
				</div>
				<ul class="nav navbar-nav">
					<li><a href="javascript:;">111</a></li>
					<li><a href="javascript:;">222</a></li>
					<li><a href="javascript:;">333</a></li>
					<li><a href="javascript:;">444</a></li>
					<li class="nav-divider"></li>
				</ul>
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="search" class="form-control" placeholder="inverse是不是很帅"/>
					</div>
					<div class="form-group">
						<input type="button" value="search" class="btn btn-danger form-control"/>
					</div>
				</form>
			</div>
			<br />
			<h3>1.4导航条中的按钮、文本和链接</h3>
			<ul class="lead">
				<li class="text-danger">1、导航条中的按钮navbar-btn</li>
				<li class="text-danger">2、导航条中的文本navbar-text</li>
				<li class="text-danger" >3、导航条中的普通链接navbar-link</li>
			</ul>
			<p class="lead">但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。<span class="text-danger">而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题</span></p>
			<p class="lead text-danger">并且我发现他们好像没啥用[冷漠脸]/p>
			<pre>
				.navbar-btn {
				margin-top: 8px;
				margin-bottom: 8px;
				}
				.navbar-btn.btn-sm {
				margin-top: 10px;
				margin-bottom: 10px;
				}
				.navbar-btn.btn-xs {
				margin-top: 14px;
				margin-bottom: 14px;
				}
				.navbar-text {
				margin-top: 15px;
				margin-bottom: 15px;
				}
				@media (min-width: 768px) {
				.navbar-text {
				float: left;
				margin-right: 15px;
				margin-left: 15px;
				  }
				.navbar-text.navbar-right:last-child {
				margin-right: 0;
				  }
				}
			</pre>
			<pre>
				.navbar-default .navbar-text {
				  color: #777;
				}
			</pre>
			<pre>
				.navbar-inverse .navbar-text {
				color: #999;
				}
			</pre>
			<pre>
				.navbar-default .navbar-link {
				color: #777;
				}
				.navbar-default .navbar-link:hover {
				color: #333;
				}
			</pre>
			<pre>
				.navbar-inverse .navbar-link {
				color: #999;
				}
				.navbar-inverse .navbar-link:hover {
				color: #fff;
				}
			</pre>
			<div class="navbar navbar-inverse">
				<div class="navbar-header">
					<a href="javascript:;" class="navbar-brand">header</a>
				</div>
				<ul class="nav navbar-nav">
					<li><a href="javascript:;" class="navbar-text">111</a></li>
					<li><a href="javascript:;" class="navbar-text">222</a></li>
					<li><a href="javascript:;" class="navbar-text">333</a></li>
					<li><a href="javascript:;" class="navbar-text">444</a></li>
					<li class="nav-divider"></li>
					<li><a href="javascript:;" class="navbar-link">navbar-link</a></li>
				</ul>
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="search" class="form-control" placeholder="inverse是不是很帅"/>
					</div>
					<div class="form-group">
						<input type="button" value="search" class="btn btn-danger form-control"/>
					</div>
					<!--<button class="navbar-btn btn">navbar-btn</button>-->
				</form>
			</div>
			<br />
			<h3>1.5固定导航条</h3>
			<ul class="lead">
				<li class="text-danger">☑  .navbar-fixed-top：导航条固定在浏览器窗口顶部</li>
				<li class="text-danger">☑  .navbar-fixed-bottom：导航条固定在浏览器窗口底部</li>
				<li class="text-danger">使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可：</li>
			</ul>
			<p class="lead">实现原理很简单，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0</p>
			<p class="lead text-danger">存在bug及解决方法:从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：</p>
			<pre>
				body {
				  padding-top: 70px;/*有顶部固定导航条时设置*/
				  padding-bottom: 70px;/*有底部固定导航条时设置*/
				}
			</pre>
			<p class="lead text-danger">因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。</p>
			<p>第二种解决这个bug方法：其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面：</p>
			<pre>
				&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
			　		…
				&lt;/div&gt;
				&lt;div class="navbar navbar-default navbar-fixed-bottom" role="navigation"&gt;
					…
				&lt;/div&gt;
				&lt;div class="content">我是内容&lt;/div&gt;
			</pre>
			<pre>
				.navbar-fixed-top ~ .content {
				   padding-top: 70px;
				}
				.navbar-fixed-bottom ~ .content {
				  padding-bottom: 70px;
				}
			</pre>
			<div class="navbar navbar-inverse navbar-fixed-top">
				<ul class="nav navbar-nav">
					<li><a href="javascript">111</a></li>
					<li><a href="javascript">222</a></li>
					<li><a href="javascript">333</a></li>
				</ul>
			</div>
			<br />
			<h3>1.6响应式导航条</h3>
			<dl class="lead">
				<dt>使用方法</dt>
				<dd>1、保证在窄屏时<span class="text-danger">需要折叠的内容</span>必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个<span class="text-danger">class类名</span>或者<span class="text-danger">id名</span>。</dd>
				<dd>2、保证在窄屏时要显示的图标样式（固定写法）：</dd>
				<pre>
					&lt;button class="navbar-toggle" type="button" data-toggle="collapse"&gt;
					  &lt;span class="sr-only">Toggle Navigation&lt;/span&gt;
					  &lt;span class="icon-bar">&lt;/span&gt;
					  &lt;span class="icon-bar">&lt;/span&gt;
					  &lt;span class="icon-bar">&lt;/span&gt;
					&lt;/button&gt;
				</pre>
				<dd>3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。</dd>
			</dl>
			<div class="navbar navbar-inverse">
				<div class="navbar-header">
					<a href="javascript:;" class="navbar-brand">慕课</a>
					<button class="navbar-toggle" data-toggle="collapse" data-target=".demo">
						<span class="sr-only">Toggle Navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse demo">
					<ul class="nav navbar-nav">
						<li><a href="javascript:;">首页</a></li>
						<li><a href="javascript:;">教程</a></li>
						<li><a href="javascript:;">介绍</a></li>
						<li><a href="javascript:;">案例</a></li>
					</ul>
				</div>
			</div>
			<br />
			<h3>反色导航条</h3>
			<p class="lead">反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将<span class="text-danger">navbar-deafult</span>类名换成<span class="text-danger">navbar-inverse</span>。其变化只是导航条的背景色和文本做了修改</p>
			<br />
			<h2>2.分页导航</h2>
			<h3>2.1带页码的分页导航</h3>
			<p class="lead text-danger">分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：</p>
			<ul class="lead">
				<li>☑   带页码的分页导航</li>
				<li>☑   带翻页的分页导航</li>
			</ul>
			<p class="lead">带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本</p>
			<ul class="lead">
				<li>☑   LESS版本：对应的源文件pagination.less</li>
				<li>☑   Sass版本：对应的源文件_pagination.scss</li>
				<li>☑   编译后版本：对应bootstrap.css文件第4130行～第4222行</li>
			</ul>
			<p class="lead">平时很多同学喜欢用<span class="text-danger">div>a和div>span</span>结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是<span class="text-danger">ul>li>a</span>这样的结构，在ul标签上加入<span class="text-danger">pagination</span>方法</p>
			<p class="lead">从效果中可以看出，当前状态页码会高亮显示，而且不能点击。而最后一页是禁用状态，也不能点击</p>
			<pre>
				.pagination> .active > a,
				.pagination> .active > span,
				.pagination> .active >a:hover,
				.pagination> .active >span:hover,
				.pagination> .active >a:focus,
				.pagination> .active >span:focus {
				z-index: 2;
				color: #fff;
				cursor: default;
				background-color: #428bca;
				border-color: #428bca;
				}
				.pagination> .disabled > span,
				.pagination> .disabled >span:hover,
				.pagination> .disabled >span:focus,
				.pagination> .disabled > a,
				.pagination> .disabled >a:hover,
				.pagination> .disabled >a:focus {
				color: #999;
				cursor: not-allowed;
				background-color: #fff;
				border-color: #ddd;
				}
			</pre>
			<p class="lead"><span class="text-danger">注意：</span>要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签。</p>
			<dl class="lead">
				<dt>大小设置：</dt>
				<dd>1、通过“pagination-lg”让分页导航变大；</dd>
				<dd>2、通过“pagination-sm”让分页导航变小：</dd>
			</dl>
			<p class="lead">其实就是通增加相应的padding大小、font-size大小和圆角大小</p>
			<ul class="pagination pagination-lg">
				<li><a href="javascript:;">第一页</a></li>
				<li><a href="javascript:;">1</a></li>
				<li class="active"><a href="javascript:;">2</a></li>
				<li><a href="javascript:;">3</a></li>
				<li><a href="javascript:;">4</a></li>
				<li><a href="javascript:;">最后一页</a></li>
			</ul><br />
			<ul class="pagination">
				<li><a href="javascript:;">第一页</a></li>
				<li><a href="javascript:;">1</a></li>
				<li class="active"><a href="javascript:;">2</a></li>
				<li><a href="javascript:;">3</a></li>
				<li><a href="javascript:;">4</a></li>
				<li><a href="javascript:;">最后一页</a></li>
			</ul><br />
			<ul class="pagination pagination-sm">
				<li><a href="javascript:;">第一页</a></li>
				<li><a href="javascript:;">1</a></li>
				<li class="active"><a href="javascript:;">2</a></li>
				<li><a href="javascript:;">3</a></li>
				<li><a href="javascript:;">4</a></li>
				<li><a href="javascript:;">最后一页</a></li>
			</ul>
			<br />
			<h3>翻页分页导航</h3>
			<p class="lead">Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。</p>
			<p class="lead text-danger">这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。</p>
			<dl class="lead">
				<dt>Bootstrap框架将其独立成一个单独的部分：</dt>
				<dd>☑   LESS版本：对应源文件为pager.less</dd>
				<dd>☑  Sass版本：对应源文件为_pager.scss</dd>
				<dd>☑  编译后版本：对应bootstrap.css文件第4223行～第4260行</dd>
			</dl>
			<p class="lead">在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加<span class="text-danger">pager类</span></p>
			<pre>
				.pager {
				padding-left: 0;
				margin: 20px 0;
				text-align: center;
				list-style: none;
				}
				.pager li {
				display: inline;
				}
				.pager li > a,
				.pager li > span {
				display: inline-block;
				padding: 5px 14px;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 15px;
				}
				.pager li >a:hover,
				.pager li >a:focus {
				text-decoration: none;
				background-color: #eee;
				}
			</pre>
			<dl class="lead">
				<dt>对齐样式设置：默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：</dt>
				<dd>☑   previous：让“上一步”按钮居左</dd>
				<dd>☑   next：让“下一步”按钮居右</dd>
				<dd>具体使用的时候，只需要在li标签上添加对应类名即可：</dd>
			</dl>
			<p class="lead">实现原理很简单，就是一个进行了左浮动，一个进行了右浮动</p>
			<pre>
				.pager .next > a,
				.pager .next > span {
				float: right;
				}
				.pager .previous > a,
				.pager .previous > span {
				float: left;
				}
			</pre>
			<p class="lead">和带页码分页导航一样，如果在li标签上添加了<span class="text-danger">disabled</span>类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过<span class="text-danger">js</span>来处理，或将<span class="text-danger">a</span>标签换成<span class="text-danger">span</span>标签。</p>
			<pre>
				.pager .disabled > a,
				.pager .disabled >a:hover,
				.pager .disabled >a:focus,
				.pager .disabled > span {
				  color: #999;
				  cursor: not-allowed;
				  background-color: #fff;
				}
			</pre>
			<ul class="pager">
				<li><a href="javascript:;">&laquo;上一页</a></li>
				<li><a href="javascript:;">下一页&raquo;</a></li>
			</ul>
			<ul class="pager">
				<li class="previous"><a href="javascript:;">&laquo;上一页</a></li>
				<li><a href="javascript:;">下一页&raquo;</a></li>
			</ul>
			<ul class="pager">
				<li><a href="javascript:;">&laquo;上一页</a></li>
				<li class="next"><a href="javascript:;">下一页&raquo;</a></li>
			</ul>
			<ul class="pager">
				<li class="disabled"><a href="javascript:;">&laquo;上一页</a></li>
				<li><a href="javascript:;">下一页&raquo;</a></li>
			</ul>
			<br />
			<h2>3.标签</h2>
			<p class="lead">在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项</p>
			<p class="lead">那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以<span class="text-danger">“.label”</span>样式来实现高亮显示。</p>
			<dl class="lead">
				<dt>既然他是一个独立的组件，当然在不同的版本下有不同的文件：</dt>
				<dd>☑   LESS版本：对应的源文件label.less</dd>
				<dd>☑   Sass版本：对应的源文件_label.scss</dd>
				<dd>☑   编译后版本：bootstrap.css文件第4261行～第4327行</dd>
			</dl>
			<p class="lead">Example heading <span class="label label-default">New</span></p>
			<pre>
				.label {
				display: inline;
				padding: .2em .6em .3em;
				font-size: 75%;
				font-weight: bold;
				line-height: 1;
				color: #fff;
				text-align: center;
				white-space: nowrap;
				vertical-align: baseline;
				border-radius: .25em;
				}
			</pre>
			<p class="lead">如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类：</p>
			<pre>
				.label[href]:hover,
				.label[href]:focus {
					color: #fff;
					text-decoration: none;
					cursor: pointer;
				}
			</pre>
			<p class="lead">有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：</p>
			<pre>
				.label:empty {
					display: none;
				}
			</pre>
			<dl class="lead">
				<dt>颜色样式设置：</dt>
				<dd>☑   label-deafult:默认标签，深灰色</dd>
				<dd>☑   label-primary：主要标签，深蓝色</dd>
				<dd>☑   label-success：成功标签，绿色</dd>
				<dd>☑   label-info：信息标签，浅蓝色</dd>
				<dd>☑   label-warning：警告标签，橙色</dd>
				<dd>☑   label-danger：错误标签，红色</dd>
			</dl>
			<pre>
				.label-default {
				background-color: #999;
				}
				.label-default[href]:hover,
				.label-default[href]:focus {
				background-color: #808080;
				}
				.label-primary {
				background-color: #428bca;
				}
				.label-primary[href]:hover,
				.label-primary[href]:focus {
				background-color: #3071a9;
				}
				.label-success {
				background-color: #5cb85c;
				}
				.label-success[href]:hover,
				.label-success[href]:focus {
				background-color: #449d44;
				}
				.label-info {
				background-color: #5bc0de;
				}
				.label-info[href]:hover,
				.label-info[href]:focus {
				background-color: #31b0d5;
				}
				.label-warning {
				background-color: #f0ad4e;
				}
				.label-warning[href]:hover,
				.label-warning[href]:focus {
				background-color: #ec971f;
				}
				.label-danger {
				background-color: #d9534f;
				}
				.label-danger[href]:hover,
				.label-danger[href]:focus {
				background-color: #c9302c;
				}
			</pre>
			<span class="label label-default">默认标签</span>
			<span class="label label-primary">主要标签</span>
			<span class="label label-success">成功标签</span>
			<span class="label label-info">信息标签</span>
			<span class="label label-warning">警告标签</span>
			<span class="label label-danger">错误标签</span>
			<br /><br />
			<a href="javascript:;" class="label label-default">默认标签</a>
			<a href="javascript:;" class="label label-primary">主要标签</a>
			<a href="javascript:;" class="label label-success">成功标签</a>
			<a href="javascript:;" class="label label-info">信息标签</a>
			<a href="javascript:;" class="label label-warning">警告标签</a>
			<a href="javascript:;" class="label label-danger">错误标签</a>
			<br /><br />
			<h2>4.徽章</h2>
			<p class="lead">从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读</p>
			<dl>
				<dt>在Bootstrap框架中，把这种效果称作为徽章效果，使用<span class="text-danger">“badge”</span>样式来实现。</dt>
				<dd>☑   LESS版本:源文件badges.less</dd>
				<dd>☑   Sass版本：源文件_badges.scss</dd>
				<dd>☑   编译后版本：bootstrap.css文件第4328行～第4366行</dd>
			</dl>
			
			<p class="lead">使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入<span class="text-danger">badge</span>类：</p>
			<dl class="lead">
				<dt>实现原理:</dt>
				<dd>主要将其设置为椭圆形，并且加了一个背景色</dd>
			</dl>
			<pre>
				.badge {
					display: inline-block;
					min-width: 10px;
					padding: 3px 7px;
					font-size: 12px;
					font-weight: bold;
					line-height: 1;
					color: #fff;
					text-align: center;
					white-space: nowrap;
					vertical-align: baseline;
					background-color: #999;
					border-radius: 10px;
				}
			</pre>
			<p class="lead text-danger">同样也使用:empty伪元素，当没有内容的时候隐藏</p>
			<pre>
				.badge:empty {
					display: none;
				}
			</pre>
			<p class="lead"><span class="text-danger">注意：</span>不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。</p>
			<ul class="nav nav-pills">
				<li class="active"><a href="javascript:;">
					<span class="badge pull-right">42</span>
					home
				</a></li>
				<li><a href="javascript:;">Profile</a></li>
				<li><a href="javascript:;">
					<span class="badge">57</span>
					Messages
				</a></li>
			</ul>
		</div> 
			
			
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
	</body>
</html>
